<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">定岗定编</block>
			<!-- <block slot="right">
				<image @click="showFun" class="nav-right-image" src="@/static/images/nav_opt.png"></image>
			</block> -->
		</cu-custom>

		<view class="page-content" :style="{height:this.ContentArea+'px',paddingTop:'30rpx'}">
			<view class="page-search">
				<!-- <view class="search">
					<view class="search-left" @click="searchBtn">
						<image src="@/static/images/search.png" mode="aspectFit" />
					</view>
					<input class="search-center" type="text" placeholder="输入任意字段进行搜索"
						placeholder-class="search-placeholder" v-model="searchValue" @blur="searchBtn">
				</view> -->
				<view class="search">
					<view class="search-left">
						<image src="@/static/images/search.png" mode="aspectFit" />
					</view>
					<input class="search-center" type="text" placeholder="输入岗位进行搜索"
						placeholder-class="search-placeholder" v-model="searchValue" @blur="onRefresh">
				</view>
			</view>

			<view class="content">
				<scroll-view class="scroll-content" :scroll-y="true" :refresher-enabled="true"
					:refresher-triggered="refreshing" @refresherrefresh="onRefresh" :refresher-background="'#F9F9F9'"
					@scrolltolower="onEndReached">
					<view class="duties-content">
						<view v-for="item in dataList" :key="item.id" class="duties-item" @click="toDetails(item)">
							<view class="duties-item-header">
								<image :src="head" mode="aspectFit" class="duties-item-header-image" />
								<view class="duties-item-header-title">{{ item.post }}</view>
							</view>
							<view class="duties-item-content">

								<view class="duties-item-content-line">
									<view class="duties-item-content-line-label">编制数:</view>
									<view class="duties-item-content-line-content">{{item.demandWorker}}
									</view>
								</view>
								<view class="duties-item-content-line">
									<view class="duties-item-content-line-label">在职数:</view>
									<view class="duties-item-content-line-content">{{item.onJobWorker}}
									</view>
								</view>
								<view class="duties-item-content-line">
									<view class="duties-item-content-line-label">缺编数：</view>
									<view class="duties-item-content-line-content">{{item.shortageWorker}}
									</view>
								</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<uni-swipe-action right-options="rightOptions">
					<uni-swipe-action-item v-for="(item, index) in dataList" :key="index">
						<view
							style=" position: relative; height: 92px; background-color: #F9F9F9; padding: 15rpx; border-radius: 15px;display: flex; margin-top: 15px;">
							<view style="margin: 5px 0 0 15px ;">
								<view>
									<text style="font-size: 18px; font-weight: bold;">
										{{item.company}}
									</text>
								</view>
								<view
									style="border-radius: 40rpx 40rpx 40rpx 40rpx; background-color: rgba(52,167,89,0.14); min-width: 140px; padding:1px 10px; margin-top:30rpx;">
									<text style="color:#34A759;">
										编制数：{{item.demandWorker}}&nbsp;&nbsp;&nbsp;在职数：{{item.onJobWorker}}&nbsp;&nbsp;&nbsp;缺编数：{{item.shortageWorker}}
									</text>
								</view>
							</view>
						</view>
						<template v-slot:right>
							<view
								style="position: relative;margin-top:30rpx;margin-left:20rpx;background-color: #F9F9F9;border-radius: 15px;padding:10rpx 30rpx">
								<view @click="toDetails(item)"
									style="border-radius: 30rpx;background-color: rgba(69, 145, 254, 1);padding:8rpx 30rpx;margin-top: 20rpx; margin-bottom: 15rpx;color: #FFFFFF;font-size: 20rpx;">
									详情
								</view>
								<view @click="toDelete(item.id)"
									style="border-radius: 30rpx;background-color: rgba(220, 31, 31, 1);padding:8rpx 30rpx;margin-top: 30rpx;margin-bottom: 15rpx;color: #FFFFFF;font-size: 20rpx;">
									删除
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
			<uni-popup ref="deletePopup" background-color="#fff" :mask-click="false">
				<view
					style="text-align: center;background-color: #FFFFFF;padding: 11rpx;width: 580rpx;height: 470rpx;border-radius: 42rpx;">
					<view class="submit-item">
						<image class="submit-icon" src="@/static/images/deleteIcon.png" />
					</view>
					<view style="margin-top: 28rpx;">
						<text class="submit-text">确定删除该列表吗</text>
					</view>
					<br>
					<view style="display: flex;">
						<button @click="sureDelete" style="border-radius: 20rpx; background-color: red;
								color: rgba(255, 255, 255, 1);width: 230rpx;margin-top: 50rpx;">确定</button>
						<button @click="cancelDelete" style="border-radius: 20rpx; background-color: gray;
								color: rgba(255, 255, 255, 1);width: 230rpx;margin-top: 50rpx;">取消</button>
					</view>
				</view>
			</uni-popup>
		</view>

		<view class="fun-wrap" v-show="isShowFun" @click="hideFun">
			<view class="fun-box" :style="{top:this.CustomBar+'px'}">
				<view class="fun-item" @click.stop="gotoAdd">
					<image class="fun-icon" src="@/static/images/addIcon.png" />
					<text class="fun-text">新增</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import moment from 'moment';
	import head from "@/static/head.png";
	import configService from '@/common/service/config.service.js'
	export default {
		data() {
			return {
				index: 0,
				head,
				searchValue: '',
				dataList: [],
				isShowFun: false,
				refreshing: true,
				pageSize: 10,
				pageNo: 1,
				total: 0,
				listUrl: '',
				approvalStatus: '',
				ids: '',
			}
		},
		watch: {
			createTime: {
				immediate: true,
				handler(val, old) {
					this.onRefresh()
				},
			},
			approvalStatus: {
				immediate: true,
				handler(val, old) {
					this.onRefresh()
				},
			},
		},
		mounted() {
			this.onRefresh()
		},
		created() {
			//this.getList()
		},
		computed: {},
		methods: {
			getFileAccessHttpUrl(avatar, subStr) {
				if (!subStr) subStr = 'http'
				if (avatar && avatar.startsWith(subStr)) {
					return avatar;
				} else {
					return configService.staticDomainURL + "/" + avatar;
				}
			},
			async onRefresh() {
				try {
					this.refreshing = true
					const res = await this.getList(1);
					this.refreshing = false
					this.pageNo = 1
					this.dataList = res?.data?.result?.records
					// for (var i = 0; i < this.dataList.length; i++) {
					// 	this.dataList[i]['avatar'] = this.getFileAccessHttpUrl(this.dataList[i]['avatar'])
					// }
					this.total = res?.data?.result?.total
				} catch (e) {
					this.refreshing = false
					console.log(e)
				}
			},
			async onEndReached() {
				try {
					console.log("获取列表2==" + this.pageNo * this.pageSize + "获取列表4==" + this.total)
					if (this.pageNo * this.pageSize < this.total) {
						const res = await this.getList(this.pageNo + 1);
						this.pageNo += 1;
						this.dataList = this.dataList.concat(res?.data?.result?.records)
						// for (var i = 0; i < this.dataList.length; i++) {
						// 	this.dataList[i]['avatar'] = this.getFileAccessHttpUrl(this.dataList[i]['avatar'])
						// }
						this.total = res?.data?.result?.total
					}
				} catch (e) {
					console.log(e)
				}
			},
			async getList(pageNo) {
				console.log("获取列表")
				let params = {
					column: 'createTime',
					order: 'desc',
					pageNo: pageNo,
					post: this.searchValue,
					pageSize: this.pageSize,
					//company: uni.getStorageSync('Auth_Company_Id'),
					field: ['id', 'company', 'classification', 'depart', 'workshop', 'classes', 'post',
						'demandWorker',
						'onJobWorker', undefined, 'shortageWorker', 'postType_dictText', 'action'
					]
				}
				return await this.$http.get("/crm_position_staffing/crmPositionStaffing/queryPositionStaffing", {
					params: params
				})
				// .then(res => {
				// 	if (res.data.success) {
				// 		let records = res.data.result.records
				// 		console.log(records)
				// 		this.dataList = records
				// 		console.log("dataList")
				// 		console.log(this.dataList)
				// 	}
				// })
			},
			clearSearch() {
				this.searchValue = ''
			},
			searchBtn() {
				this.getList()
			},
			showFun() {
				this.isShowFun = true
			},
			hideFun() {
				this.isShowFun = false
			},
			gotoAdd() {
				// uni.navigateTo({
				// 	url: '/pages/introductionFeeEntry/introductionFeeEntryAdd/index'
				// })
			},
			toDetails(item) {


				uni.navigateTo({
					url: '/pages/positionStaffingTable/positionStaffingEdit/index?id=' + item.id +
						'&positionStaffingObj=' + JSON.stringify(
							item)
				})
			},

			urging(id) {
				const params = {
					applicationId: id,
					approvalType: 1
				}
				this.$http.get("/crm_on_hand/crmOnHand/urge", {
						params: params
					})
					.then(res => {
						if (res.data.success) {
							this.$refs.urgingPopup.open('center')
						}
					})
			},
			toDelete(id) {
				// this.ids = id
				// this.$refs.deletePopup.open('center')
			},
			sureDelete() {
				this.$refs.deletePopup.close()
				this.$http.delete('/crm_introduction_fee/crmIntroductionFee/deleteBatch?ids=' +
						this.ids)
					.then(res => {
						if (res.data.success) {
							this.$tip.toast('删除成功')
							this.getList()
						} else {
							this.$tip.toast('删除失败')
						}
					}).catch(() => {
						this.$tip.loaded();
						this.$tip.toast('删除失败')
					});
			},
			cancelDelete() {
				this.$refs.deletePopup.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	image {
		width: 100%;
		height: 100%;
	}

	page {
		background: #ffffff;
	}

	.page-content {
		background: #ffffff;
		display: flex;
		flex-direction: column;

		.content {
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;
			padding: 15px 17px 0;
			background: #f9f9f9;
			border-radius: 32px 32px 0 0;

			.scroll-content {
				height: 100%;
			}
		}
	}

	.page-search {
		padding-left: 34rpx;
		margin-bottom: 12rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.search {
		width: 688rpx;
		height: 86rpx;
		background-color: rgba(249, 249, 249, 1);
		border-radius: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;

		.search-left {
			width: 28rpx;
			height: 28rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.search-center {
			margin-left: 22rpx;
		}

		.search-placeholder {
			font-size: 28rpx;
			font-weight: 400;
			color: #7c7c7c;
		}
	}

	.duties-content {
		display: flex;
		flex-wrap: wrap;
		gap: 19px 20px;
	}

	.duties-item {
		background: #ffffff;
		flex: 0 0 calc(50% - 10px);
		box-shadow: 0 4px 30px 0 rgba(0, 0, 0, 0.06);
		border-radius: 20px;
		box-sizing: border-box;

		.duties-item-header {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			padding: 2px 5px 5px;
			align-items: center;
			justify-content: center;

			&-image {
				width: 39px;
				height: 39px;
				margin-bottom: 3px;
			}

			&-title {
				font-weight: bold;
				font-size: 14px;
				color: #000000;
				line-height: 22px;
			}
		}

		.duties-item-content {
			background: #f6f6f6;
			box-sizing: border-box;
			padding: 5px 7px 7px;

			&-line {
				font-size: 10px;
				color: #2d2929;
				line-height: 12px;
				display: flex;
				margin-bottom: 7px;

				&-label {
					flex: 0 0 70px;
				}

				&-content {
					color: #000000;
				}
			}
		}
	}
</style>